<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SJGameAdmin - ${title!}</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="${ctx!}/assets/plugins/bootstarp/css/bootstrap.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="${ctx!}/assets/plugins/font-awesome/css/font-awesome.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="${ctx!}/assets/plugins/Ionicons/css/ionicons.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="${ctx!}/assets/css/AdminLTE.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="${ctx!}/assets/css/_all-skins.css">
    <!-- layer -->
    <link rel="stylesheet" href="${ctx!}/assets/plugins/layer/theme/default/layer.css">
${css!}

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9] -->
<#--<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>-->
<#--<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>-->
    <script src="${ctx!}/assets/js/html5shiv.min.js"></script>
    <script src="${ctx!}/assets/js/respond.min.js"></script>
    <!--[endif]-->

    <!-- Google Font -->
    <link rel="stylesheet" href="${ctx!}/assets/plugins/google/css.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">

    <header class="main-header">
        <!-- Logo -->
        <a href="${ctx!}/welcome" target="iframe" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>A</b>dmin</span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>SJGame</b>Admin</span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">

                    <!-- User Account: style can be found in dropdown.less -->
                    <li class="dropdown user user-menu" >
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                        <#--<img src="<@shiro.principal property="avatar"/>" class="user-image" alt="User Image">-->
                            <img  src="${ctx!}/assets/img/head.png" class="user-image" alt="User Image">
                            <span class="hidden-xs"><@shiro.principal property="nickName"/></span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- User image -->
                            <li class="user-header">
                            <#--  <img src="<@shiro.principal property="avatar"/>" class="img-circle" alt="User Image">-->
                                <img id="userimage" src="${ctx!}/assets/img/head.png" class="img-circle" alt="User Image">
                                <p>
                              <@shiro.principal property="nickName"/>
                                    <small><@shiro.principal property="createTime"/></small>
                                </p>
                            </li>
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="javascript:void(0);" class="btn btn-default btn-flat" id = "updatepass">修改密码</a>
                                </div>
                                <div class="pull-right">
                                    <a href="${ctx!}/logout" id="signout" class="btn btn-default btn-flat">退出</a>
                                </div>
                            </li>
                        </ul>
                    </li>

                    <!-- Control Sidebar Toggle Button -->
                    <li>
                        <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <!-- =============================================== -->

    <!-- Left side column. contains the sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">

                <#-- <img src="<@shiro.principal property="avatar"/>" class="img-circle" alt="User Image">-->
                    <img src="${ctx!}/assets/img/head.png" class="img-circle" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p><@shiro.principal property="nickName"/></p>
                    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                </div>
            </div>

            <!-- sidebar menu: : style can be found in sidebar.less -->

        <#--  <ul class="sidebar-menu" data-widget="tree">
              <li <#if active = "home">class="active" </#if>><a href="${ctx!}/index"><i class="fa fa-home"></i> <span>主页</span></a>
              </li>
              <li class="treeview &lt;#&ndash;<#if active=="user" || active=="role" || active=="resource" >active</#if>&ndash;&gt;">
                  <a href="#">
                      <i class="fa fa-cog"></i> <span>系统管理</span>
                      <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
          </span>
                  </a>
                  <ul class="treeview-menu">
          <@shiro.hasPermission name="system:user:index">
              <li <#if active=="user">class="active"</#if>><a href="${ctx!}/user/index" target="iframe"><i class="fa fa-user-o"></i>
                  用户管理</a></li>
          </@shiro.hasPermission>
          <@shiro.hasPermission name="system:role:index">
              <li <#if active=="role">class="active"</#if>><a href="${ctx!}/role/index" target="iframe"><i
                      class="fa fa-user-circle-o"></i> 角色管理</a></li>
          </@shiro.hasPermission>
          <@shiro.hasPermission name="system:resource:index">
              <li <#if active=="resource">class="active"</#if>><a href="${ctx!}/resource/index" target="iframe"><i
                      class="fa fa-file-o"></i> 资源管理</a></li>
          </@shiro.hasPermission>
                  </ul>
              </li>

          </ul>-->

            <ul class="sidebar-menu" data-widget="tree">
                <li <#if active = "home">class="active" </#if>><a href="${ctx!}/welcome" target="iframe"><i class="fa fa-home"></i> <span>主页</span></a>
                </li>
                <!-- 递归  宏定义 -->
      <#macro bpTree children>
          <#if children?? && children?size gt 0>
              <#list children as child>
                  <#if child.childs?? && child.childs?size gt 0>
                      <@shiro.hasPermission name="${child.sourceKey}">
        <li class="treeview">
            <a href="#">
                <i class="fa ${child.icon}"></i> <span>${child.name}</span>
                <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
            </a>
            <ul class="treeview-menu">
            <@bpTree children=child.childs />
            </ul>
        </li>
                      </@shiro.hasPermission>
                  <#else>
                      <@shiro.hasPermission name="${child.sourceKey}">
            <li>
                <a href="${ctx!}${child.sourceUrl}" target="iframe"><i
                        class="fa ${child.icon}"></i>  ${child.name}</a>
            </li>
                      </@shiro.hasPermission>
                  </#if>
              </#list>
          </#if>
      </#macro>
                <!-- 调用宏 生成递归树 -->
       <@bpTree children=treeMenu />
            </ul>


        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- =============================================== -->

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <iframe id="iframe" width="100%" height="100%" name="iframe"
                src="${ctx!}/welcome">
        </iframe>

    </div>
    <!-- /.content-wrapper -->

    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 1.0.0
        </div>
        <strong>Copyright &copy; 2018 <a href="javascript:void(0);">SJGame</a>.</strong> All rights
        reserved.
    </footer>


    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- Home tab content -->
            <div class="tab-pane" id="control-sidebar-home-tab">

            </div>
        </div>
    </aside>
    <!-- /.control-sidebar -->
<div class="control-sidebar-bg"></div>

</div>
<!-- ./Site wrapper -->









<!-- jQuery 3 -->
<script src="${ctx!}/assets/plugins/jquery/jquery.min.js"></script>
<#--<script src="${ctx!}/assets/plugins/jquery-ui/jquery-ui.min.js"></script>-->
<#--<script src="${ctx!}/assets/plugins/jquery-ui/sortable.min.js"></script>-->
<!-- Bootstrap 3.3.7 -->
<script src="${ctx!}/assets/plugins/bootstarp/js/bootstrap.js"></script>
<#--<script src="${ctx!}/assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.js"></script>
<script src="${ctx!}/assets/plugins/bootstrap-wysihtml5/moment.js"></script>
<script src="${ctx!}/assets/plugins/bootstrap-wysihtml5/daterangepicker.js"></script>
<script src="${ctx!}/assets/plugins/bootstrap-wysihtml5/jquery.knob.min.js"></script>
<script src="${ctx!}/assets/plugins/bootstrap-wysihtml5/jquery-jvectormap-1.2.2.min.js"></script>-->
<!-- FastClick -->
<script src="${ctx!}/assets/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="${ctx!}/assets/js/adminlte.js"></script>
<!-- layer -->
<script src="${ctx!}/assets/plugins/layer/layer.js"></script>

<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<#--<script src="${ctx!}/assets/js/dashboard.js"></script>-->
<!-- AdminLTE for demo purposes -->
<script src="${ctx!}/assets/js/demo.js"></script>
<script>


    function changeFrameHeight() {
        var ifm = document.getElementById("iframe");
        ifm.height = document.documentElement.clientHeight - 120;
    }

    window.onresize = function () {
        changeFrameHeight();
    }
    $(function () {
        changeFrameHeight();
    });

    $(document).ready(function () {
        $("#updatepass").click(function () {
        layer.open({
        type: 2,
        title: '修改密码',
        shadeClose: false,
        shade: 0.3,
        area: ['800px', '500px'],
        content: ' ${ctx!}/user/updatePwd',
        end: function(index){

        }
        });
        });

    })

</script>
${js!}
</body>
</html>
